import { ReactElement, useContext } from 'react'
import { Row, Col, Form, DatePicker } from 'antd'
import style from './index.module.less'
import MultiDate from '../multiDate'
import { Context } from '../../context'
import TextCell from '@components/textCell'

const { Item } = Form

function Main (): ReactElement {
  const { caseDetail: d } = useContext(Context)
  const disabled = d !== null && ['已确认', '抽查中', '已抽查'].includes(d.score_status)
  return (
    <div className={style.container} id='inputBlockOne'>
      <div className={style.title}>案件流程日期</div>
      <Row>
        <Col span={10}>
          <Item label='1. 收案日期' name='accept_datetime'>
            {disabled ? <TextCell /> : <DatePicker className={style.input} allowClear /> }
          </Item>
        </Col>
        <Col span={1}><span /></Col>
        <Col span={10}>
          <Item label='2. 立案日期' name='docket_datetime'>
            {disabled ? <TextCell /> : <DatePicker className={style.input} allowClear /> }
          </Item>
        </Col>
      </Row>
      <Row>
        <Col span={10}>
          <Item label='3. 交费日期' name='fee_pay_datetime'>
            {disabled ? <TextCell /> : <DatePicker className={style.input} allowClear /> }
          </Item>
        </Col>
        <Col span={1}><span /></Col>
        <Col span={10}>
          <Item label='4. 收到保全裁定日期' name='preservation_datetime'>
            {disabled ? <TextCell /> : <DatePicker className={style.input} allowClear /> }
          </Item>
        </Col>
      </Row>
      <Row>
        <Col span={10}>
          <Item label='5. 移交办案秘书日期' name='to_process_datetime'>
            {disabled ? <TextCell /> : <DatePicker className={style.input} allowClear /> }
          </Item>
        </Col>
        <Col span={1}><span /></Col>
        <Col span={10}>
          <Item label='6. 答辩送达日期（最后一个当事人送达日期）' name='arrive_datetime'>
            {disabled ? <TextCell /> : <DatePicker className={style.input} allowClear /> }
          </Item>
        </Col>
      </Row>
      <Row>
        <Col span={10}>
          <Item label='7. 最后一个当事人选定仲裁员' name='arbitrator_select_datetime'>
            {disabled ? <TextCell /> : <DatePicker className={style.input} allowClear /> }
          </Item>
        </Col>
        <Col span={1}><span /></Col>
        <Col span={10}>
          <Item label='8. 第一次呈报组庭' name='arbitrator_report_datetime'>
            {disabled ? <TextCell /> : <DatePicker className={style.input} allowClear /> }
          </Item>
        </Col>
      </Row>
      <Row>
        <Col span={10}>
          <Item label={<span>9. 组庭日期<span className={style['sub-label']}>（可多个）</span></span>}>
            {disabled
              ? (
              <Item name='arbitrator_assign_datetime_list' noStyle><TextCell /></Item>
                )
              : MultiDate('arbitrator_assign_datetime_list', disabled)}
          </Item>
        </Col>
        <Col span={1}><span /></Col>
        <Col span={10}>
          <Item label={<span>10. 开庭日期<span className={style['sub-label']}>（可多个）</span></span>}>
            {disabled
              ? (
              <Item name='hearing_datetime_list' noStyle><TextCell /></Item>
                )
              : MultiDate('hearing_datetime_list', disabled)}
          </Item>
        </Col>
      </Row>
      <Row>
        <Col span={10}>
          <Item label='11. 结案文书报送' name='closure_report_datetime'>
            {disabled ? <TextCell /> : <DatePicker className={style.input} allowClear /> }
          </Item>
        </Col>
        <Col span={1}><span /></Col>
        <Col span={10}>
          <Item label='12. 结案文书签批日期' name='closure_audit_datetime'>
            {disabled ? <TextCell /> : <DatePicker className={style.input} allowClear /> }
          </Item>
        </Col>
      </Row>
      <Row>
        <Col span={10}>
          <Item label={<span>13. 结案文书最后一个当事人送达完成日期</span>} name='closure_datetime'>
            {disabled ? <TextCell /> : <DatePicker className={style.input} allowClear /> }
          </Item>
        </Col>
        <Col span={1}><span /></Col>
        <Col span={10}>
          <Item label='14. 归档日期' name='file_datetime'>
            {disabled ? <TextCell /> : <DatePicker className={style.input} allowClear /> }
          </Item>
        </Col>
      </Row>
    </div>
  )
}

export default Main
